<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="wrap">
			<view class="commodity">
				<uni-list>
					<uni-list-item clickable  @click="onClick(commodity.comId)">
						<template slot="header">
							<view class="header-image">
								<!-- <image class="slot-image" style="width: 200rpx;" :src="'http://localhost:8088'+item.imgUrl.split(',')[0]" mode="widthFix"></image> -->
								<image class="slot-image" style="width: 200rpx;" src="/static/demo.png" mode="widthFix"></image>
							</view>
						</template>
						<template slot="body">
							<view class="body-content">
								<view class="title">
									{{commodity.comName}}
								</view>
								<view class="shop-money">
									<view class="shop-slod">¥<span>{{commodity.soldMoney}}</span></view>
									<view class="shop-orig">¥<span>{{commodity.oriMoney}}</span></view>
								</view>
								<view class="method">
									<view v-if="commodity.method == 0">以钱换物</view>
									<view v-if="commodity.method == 1">以物换物</view>
									<view v-if="commodity.method == 2">免费送</view>
								</view>
								<view class="nickname">
									{{commodity.nickName}}
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="comment-content">
				<view class="comment-top">留言板信息</view>
				<view class="top">
					<view class="left">
						<view class="heart-photo">
							<cmd-avatar :src="comment.avatar == '' ? '../../static/profile.jpg' : 'http://localhost:8088' + comment.avatar" :size="32">
							</cmd-avatar>
						</view>
						<view class="user-info">
							<view class="name">{{ comment.cuserName }}</view>
							<view class="date">{{$u.timeFormat(comment.commTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
						</view>
					</view>
				</view>
				<view class="content">{{ comment.content }}</view>
			</view>
			<view class="all-reply" v-if="comment.allReply > 0">
				<view class="all-reply-top">信息列表（{{ comment.allReply }}）</view>
				<view class="item" v-for="(item, index) in replyList" :key="index">
					<view class="comment">
						<view class="top">
							<view class="left">
								<view class="heart-photo">
									<cmd-avatar :src="item.avatar == '' ? '../../static/profile.jpg' : 'http://localhost:8088' + item.avatar" :size="32">
									</cmd-avatar>
									</view>
								<view class="user-info">
									<view class="name">{{ item.ruserName }}</view>
									<view class="date">{{$u.timeFormat(item.reTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
								</view>
							</view>
						</view>
						<view class="content">{{ item.content }}</view>
					</view>
				</view>
			</view>
			<view class="comment-input">
				<view class="left">
					<view>
						<u-input v-model="inputVal" type="text" :custom-style="inputStyle"/>
					</view>
				</view>
				<view class="right">
					<view class="send btn u-line-1" @click="reply()">回复</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				title: "消息",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				commodity:{},
				replyList: [],
				comment: '',
				inputStyle:{
					width:'500rpx'
				},
				inputVal:''
			}
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad(option) {
			// console.log(option.cId)
			// console.log(option.comId)
			// console.log(option.num)
			this.getCommodity(option.comId);
			this.getReply(option.cId);
			if(option.num > 0){
				this.updateStatus(option.cId);
			}
		},
		methods: {
			// 跳转到商品详情页
			onClick(comId){
				uni.navigateTo({
				    url: '/pages/detail/detail?comId='+comId
				});
			},
			// 商品信息
			getCommodity(comId){
				Vue.prototype.$u.api.getDetailByComId({
					comId:comId
				}).then(res => {
					this.commodity = res;
				})
			},
			// 更新消息状态为已读
			updateStatus(cId){
				Vue.prototype.$u.api.updateReplyStatus({
					cId: cId,
					cuserId: this.getUserInfo.userId
				}).then(res => {
					console.log(res)
				})
			},
			// 回复列表
			getReply(cId) {
				Vue.prototype.$u.api.getCommentByCId({
					cId: cId
				}).then(res => {
					if(res){
						this.comment = res;
					}else{
						console.log(res)
					}
				});
				Vue.prototype.$u.api.getReplyByCId({
					cId: cId
				}).then(res => {
					if(res){
						this.replyList = res;
					}else{
						console.log(res)
					}
				});
			},
			// 回复
			reply(){
				// 被回复用户ID
				let midId = '';
				if(this.getUserInfo.userId == this.comment.cuserId){
					midId = this.comment.spuserId
				}else{
					midId = this.comment.cuserId
				}
				// console.log(midId)
				Vue.prototype.$u.api.addReplay({
					comId: this.commodity.comId,
					cId: this.comment.cId, // 评论ID
					cuserId: midId, // 被回复用户ID
					spuserId: this.commodity.userId, // 商品发布者ID
					reContent: this.inputVal, 
					ruserId: this.getUserInfo.userId // 回复者ID
				}).then(res => {
					if(res.code == 200){
						this.isReply = false;
						this.inputVal = '';
						uni.showToast({
							icon:"none",
							title:"回复成功"
						})
						this.getReply(this.comment.cId);
					}else{
						uni.showToast({
							icon:"none",
							title:"回复失败"
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.commodity{
		.header-image{
			width: 200rpx;
			height: 200rpx;
		}
		
		.body-content{
			padding: 5rpx 18rpx;
		}
		.title {
			font-weight: bold;
			font-size: 26rpx;
			height: 75rpx;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.shop-money {
			display: inline-flex;
		}
		
		.shop-slod {
			font-size: 26rpx;
			margin: 8rpx 0rpx;
			color: red;
			font-weight: bold;
		}
		
		.shop-slod>span {
			font-size: 36rpx;
		}
		
		.shop-orig {
			font-size: 26rpx;
			margin: 16rpx 20rpx;
			color: gray;
			text-decoration: line-through;
		}
		.method {
			background-color: #dfdfdf;
			display: inline-block;
			padding: 8rpx;
			border-radius: 5rpx;
			font-size: 24rpx;
			margin-left: 50rpx;
		}
		.nickname{
			font-size: 26rpx;
			color: gray;
		}
	}
	.comment-content {
		padding: 20rpx;
		margin: 10rpx 0;
		font-size: 32rpx;
		background-color: #ffffff;
		.comment-top {
			margin-bottom: 20rpx;
			padding-left: 20rpx;
			border-left: solid 4rpx #5677fc;
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.top {
			display: flex;
			justify-content: space-between;
		}
		.left {
			display: flex;
		
			.heart-photo {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background-color: #f2f2f2;
				}
			}
			.user-info {
				margin-left: 10rpx;
				.name {
					color: #5677fc;
					font-size: 28rpx;
					margin-bottom: 4rpx;
				}
				.date {
					font-size: 20rpx;
					color: $u-light-color;
				}
			}
		}
	}
	
	.comment {
		padding: 30rpx;
		font-size: 32rpx;
		background-color: #ffffff;
		.top {
			display: flex;
			justify-content: space-between;
		}
		.left {
			display: flex;

			.heart-photo {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background-color: #f2f2f2;
				}
			}
			.user-info {
				margin-left: 10rpx;
				.name {
					color: #5677fc;
					font-size: 28rpx;
					margin-bottom: 4rpx;
				}
				.date {
					font-size: 20rpx;
					color: $u-light-color;
				}
			}
		}
		.highlight {
			color: #5677fc;

			.num {
				color: #5677fc;
			}
		}
	}

	.all-reply {
		margin-top: 10rpx;
		padding-top: 20rpx;
		background-color: #ffffff;
		margin-bottom: 100rpx;

		.all-reply-top {
			margin-left: 20rpx;
			padding-left: 20rpx;
			border-left: solid 4rpx #5677fc;
			font-size: 30rpx;
			font-weight: bold;
		}

		.item {
			border-bottom: solid 2rpx $u-border-color;
		}
	}
	
	.comment-input {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		.left {
			display: flex;
			font-size: 20rpx;
			margin-left: 30rpx;
		}
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			position: absolute;
			right: 0;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}
			.send {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}
			.cancel {
				background-color: #cccccc;
				margin-right: 5rpx;
			}
		}
	}
</style>
